let myAjax = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP')
let cContent = document.querySelector('.cContent')
let nContent = document.querySelector('.nContent')
let pContent = document.querySelector('.pContent')
let newTit = document.querySelector('.new')
let hotTit = document.querySelector('.hot')
let pinTit = document.querySelector('.pin')
function onLoad() {
    cContent.style.display = 'block'
    pContent.style.display = 'none'
    nContent.style.display = 'none'
    newTit.style.color = 'black'
    hotTit.style.color = 'orange'
    pinTit.style.color = 'black'
    myAjax.open('get', 'http://localhost:3000/play/new', true)
    myAjax.send()
    myAjax.onreadystatechange = function() {
        if(myAjax.readyState == 4 && myAjax.status == 200) {
            let res = JSON.parse(myAjax.responseText)
            console.log(res);
            loadPage(res, 'hot')
        }else{

        }
    }
}
onLoad()
// 初始化也相当于展示最热
function loadPage(data, dom) {
    console.log(dom);
    let itemContent = document.querySelector('.itemContent')
    console.log(itemContent)
    itemContent.innerHTML = ''
    if(dom == 'new') {
        itemContent = document.querySelector('.itemContent1')
        itemContent.innerHTML = ''
    }
    for(let i = 0; i < data.length; i++) {
        for(let j = 0; j < data[i].length; j++) {
            // 创建一个li、img、h3、p、span
            let li = document.createElement('li')
            let img = document.createElement('img')
            let h3 = document.createElement('h3')
            let p = document.createElement('p')
            let span = document.createElement('span')
            // 给li、img、h3、p、span添加内容
            img.src = data[i][j].img
            if(data[i][j].description == undefined) {
                data[i][j].description = '三无产品'
            }
            h3.innerText = data[i][j].description
            p.innerText = data[i][j].text
            span.style.color = 'orange'
            span.innerText = data[i][j].price
            li.appendChild(img)
            li.appendChild(h3)
            li.appendChild(p)
            li.appendChild(span)
            itemContent.appendChild(li)
        }
    }
}
// 展示最新模块
function showNew() {
    // 将最新展示，其余两个模块隐藏
    cContent.style.display = 'none'
    pContent.style.display = 'none'
    nContent.style.display = 'block'
    newTit.style.color = 'orange'
    hotTit.style.color = 'black'
    pinTit.style.color = 'black'
    myAjax.open('get', 'http://localhost:3000/play/hot', true)
    myAjax.send()
    myAjax.onreadystatechange = function() {
        if(myAjax.readyState == 4 && myAjax.status == 200) {
            let res = JSON.parse(myAjax.responseText)
            console.log(res);
            loadPage(res, 'new')
        }else{

        }
    }
}

function showP() {
    cContent.style.display = 'none'
    pContent.style.display = 'block'
    nContent.style.display = 'none'
    newTit.style.color = 'black'
    hotTit.style.color = 'black'
    pinTit.style.color = 'orange'
}